<template>
  <div class="login-container">
    <el-card class="login-card">
      <h2 class="login-title">手机号验证码登录</h2>
      <el-form ref="loginFormRef" :model="loginForm" class="login-form">
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="loginForm.phone" placeholder="请输入手机号" clearable />
        </el-form-item>
        <el-form-item label="验证码" prop="code">
          <div class="code-input-container">
            <el-input v-model="loginForm.code" placeholder="请输入验证码" clearable style="width: 65%;" />
            <el-button type="primary" @click="getCode" class="code-btn" style="width: 30%; margin-left: 5%;" :disabled="isDisabled">
  {{ countdown > 0 ? `${countdown}s后重新获取` : '获取验证码' }}
</el-button>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleLogin" class="login-btn" block>登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';

const loginForm = reactive({
  phone: '',
  code: ''
});

const loginFormRef = ref(null);
const countdown = ref(0);
const isDisabled = ref(false);

const getCode = () => {
  if (!loginForm.phone.trim()) {
    ElMessage.warning('请输入手机号');
    return;
  }

  isDisabled.value = true;
  countdown.value = 60;
  ElMessage.success('验证码已发送成功');

  const timer = setInterval(() => {
    countdown.value--;
    if (countdown.value <= 0) {
      clearInterval(timer);
      isDisabled.value = false;
    }
  }, 1000);
};

const handleLogin = () => {
  // 登录逻辑，这里只是示例
 ElMessage.success('登录成功');
};
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #1a365d;
}

.login-card {
  width: 400px;
  padding: 20px;
}

.login-title {
  text-align: center;
  margin-bottom: 20px;
}

.login-form {
  margin-top: 20px;
}

.code-input-container {
  display: flex;
  align-items: center;
}

.code-btn {
  margin-left: 10px;
}

.login-btn {
  margin-top: 10px;
}
</style>